<script lang='ts' setup>
import { pinia_global_state } from '@/state/state.ts'

const emits = defineEmits(['update:show', 'success', 'close'])

const props = defineProps({
  show: { required: true, type: Boolean },
  path: { required: true, type: String }
})

const pinia = pinia_global_state()

async function close(): Promise<void> {
  emits('update:show', false)
  emits('success')
}
</script>

<template>
  <n-modal :closable='false' :close-on-esc='false' :mask-closable='false' :show='props.show' class='resources-upload-file-modal' transform-origin='center' @update:show='close'>
    <n-card>
      <n-space vertical>
        <n-divider>上传文件</n-divider>
        <div>
          <n-upload :data='{path: props.path!}' :headers='{"Authorization": "Bearer " + pinia.token}' :show-remove-button='false' action='/api/toolbox/resources/upload' directory-dnd multiple>
            <n-upload-dragger style='height: 300px'>
              <n-text style='font-size: 16px'>点击或者拖动文件到该区域来上传</n-text>
            </n-upload-dragger>
          </n-upload>
        </div>
        <div>
          <n-space align='center' justify='center'>
            <n-button size='small' type='primary' @click='close'>上传完成</n-button>
          </n-space>
        </div>
      </n-space>
    </n-card>
  </n-modal>
</template>

<style scoped>
.resources-upload-file-modal {
  width: 800px;
  height: 600px;
  overflow-y: auto;
}
</style>
